<template>
  <div class="container">
    <div class="chartOne" ref="chartOne"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { chartOption } from "@/views/echarts/ts/lineOne";
const chartOne = ref<HTMLDivElement | null>(null);
let myOne: any;
const timer = ref();
function initChart() {
  if (myOne) {
    myOne.clear();
  }
  myOne = echarts.init(chartOne.value);
  myOne.setOption(chartOption());
  timer.value = setInterval(() => {
    myOne.setOption({
      legend: {
        selected: {
          出口: false,
          入口: false,
        },
      },
    });
    myOne.setOption({
      legend: {
        selected: {
          出口: true,
          入口: true,
        },
      },
    });
  }, 10000);
}

onMounted(() => {
  initChart();
});
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  .chartOne{
    width: 100%;
    height: 100%;
  }
}
</style>